import React, { Component } from "react";
import { PlusCircleOutlined, EditOutlined } from '@ant-design/icons';
import { Button, message, Input, Modal } from "antd";
import { getSquareList, squareCreate, squareModify } from "@/api/square";
import TableComponent from '@/components/TableList';
import SearchHeader from '@/components/SearchHeader';
import AvatarUploader from '@/components/Upload/Uploadavatar'
import { getImage } from '@/utils/renderCell'
import { widgetProps } from '@/utils/constant';

class User extends Component {
  tableRef = React.createRef();
  state = {
    list: [],
    squareModalVisiable: false,
    editMode: false,
    squareId: '',
    squareName: '',
    coverUrl: '',
    listQuery: {},
  };

  // 表格数据更新 抛出数据
  handleGetData = data => {
    this.setState({
      list: data.list
    })
  }

  // 处理搜索
  handleSearch = (listQuery) => {
    this.setState({
      listQuery
    });
  };

  resetModal = () => {
    this.setState({
      squareModalVisiable: false,
      squareName: '',
      coverUrl: '',
      squareId: ''
    })
  };

  // 创建广场类别 打开弹窗
  handleAddSquare = () => {
    this.setState({
      squareModalVisiable: true,
      editMode: false
    })
  }

  // 执行广场添加接口
  handleAddSquareOk = () => {
    if (!this.state.squareName.trim()) {
      return message.error('请输入广场名称.');
    }
    const params = {
      name: this.state.squareName,
      coverUrl: this.state.coverUrl
    };
    if (this.state.editMode) {
      params.id = this.state.squareId;
    }
    const handler = this.state.editMode ? squareModify : squareCreate;
    handler(params).then(() => {
      message.success(this.state.editMode ? '修改广场成功.' : '创建广场成功.');
      this.tableRef.current.fetchData();
    }).finally(() => {
      this.resetModal()
    });
  };


  // 上传回调
  handleUploadOk = coverUrl => {
    this.setState({
      coverUrl
    })
  }

  handleInputCHange = e => {
    this.setState({
      squareName: e.target.value
    })
  }

  handleEditSquare = (row) => {
    this.setState({
      squareModalVisiable: true,
      editMode: true,
      squareName: row.name,
      coverUrl: row.coverUrl,
      squareId: row.id
    })
  }

  // 搜索项
  meta = {
    fields: [
      {
        key: 'name',
        label: '广场名称',
        widgetProps
      }
    ],
  };


  // 表格列 字段定义
  columns = [

    {
      title: '广场名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '广场封面图片',
      dataIndex: 'coverUrl',
      key: 'coverUrl',
      render: getImage
    },

    {
      title: 'updateTime',
      dataIndex: 'updateTime',
      key: 'updateTime',
    },
    {
      title: 'createTime',
      dataIndex: 'createTime',
      key: 'createTime',
    },
    
    {
      title: '操作',
      key: 'action',
      render: (text, row) => (
        <Button type="primary" shape="circle" icon={<EditOutlined />} title="edit" onClick={this.handleEditSquare.bind(null, row)} />
      )
    }

  ];
  render() {

    return (
      <>
        <SearchHeader onSearch={this.handleSearch} meta={this.meta}>
          <Button type='primary' onClick={this.handleAddSquare} icon={<PlusCircleOutlined />}>创建广场</Button>
        </SearchHeader>
        <br />
        <TableComponent getTableListApi={getSquareList} columns={this.columns} queryParams={this.state.listQuery} ref={this.tableRef} onGetData={this.handleGetData} />
        <Modal
          confirmLoading={this.state.loading}
          title="创建作品广场类别"
          maskClosable={false}
          visible={this.state.squareModalVisiable}
          onOk={this.handleAddSquareOk}
          onCancel={this.resetModal}>
          <h5>广场名称</h5>
          <Input placeholder='请输入广场名称.' value={this.state.squareName} onChange={this.handleInputCHange} />
          <br />
          <br />
          <h5>广场封面图片</h5>
          <AvatarUploader onUploadOk={this.handleUploadOk} avatar={this.state.coverUrl} />
        </Modal>
      </>
    );
  }
}

export default User;
